<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
	pageContext.setAttribute("APP_Path", request.getContextPath());
 %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>员工列表</title>
    <script type="text/javascript" src="${APP_Path}/static/bootstrap-3.3.7-dist/js/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="${APP_Path}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
	<script type="text/javascript" src="${APP_Path}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
  </head>
  
  <body>
  	<div class="container">
  		<!-- 标题 -->
  		<div class="row"></div>
  		<div class="col-md-12">
  			<h1>员工管理</h1>
  		</div>
  		<!-- 按钮 -->
  		<div class="row">
  			<div class="col-md-4 col-md-offset-8">
  				<button class="btn btn-primary">新增</button>
  				<button class="btn btn-danger">删除</button>
  			</div>
  		</div>
  		<!-- 显示表格数据 -->
  		<div class="row">
  			<div class="col-md-12">
  				<table class="table table-striped table-hover">
  					<tr>
  						<th>#</th>
  						<th>empName</th>
  						<th>gender</th>
  						<th>email</th>
  						<th>deptName</th>
  						<th>操作</th>
  					</tr>
  					<c:forEach items="${pageInfo.list }" var="emp">
	  					<tr>
	  						<th>${emp.empId }</th>
	  						<th>${emp.empName}</th>
	  						<th>${emp.gender=="M"?"男":"女" }</th>
	  						<th>${emp.email }</th>
	  						<th>${emp.department.deptName }</th>
	  						<th>
	  							<button class="btn btn-primary btn-xs">
	  								<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
	  								编辑
	  							</button>
	  							<button class="btn btn-danger btn-xs">
	  								<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
	  								删除
	  							</button>
	  						</th>
	  					</tr>
  					</c:forEach>
  					
  				</table>
  			</div>
  		</div>
  		<!-- 显示分页信息 -->
  		<div class="row">
  			<!-- 分页文字信息 -->
  			<div class="col-md-6">
  				<nav aria-label="Page navigation">
				  <ul class="pagination">
				  	<li><a>当前第${pageInfo.pageNum }页,总${pageInfo.pages }页,总${pageInfo.total }条记录</a></li>
				  </ul>
				</nav>
  			</div>
  			<!-- 分页条 -->
  			<div class="col-md-6">
  				<nav aria-label="Page navigation">
				  <ul class="pagination">
				  	<c:if test="${!pageInfo.isFirstPage }">
				  	  	<li><a href="${APP_Path }/emps?pn=1">首页</a></li>
				  	</c:if>
					<c:if test="${pageInfo.isFirstPage }">
				  	  	<li class="disabled"><a href="${APP_Path }/emps?pn=1">首页</a></li>
				  	</c:if>
				  	<c:if test="${pageInfo.hasPreviousPage }">
					  	<li>
					      <a href="${APP_Path }/emps?pn=${pageInfo.pageNum-1 }" aria-label="Previous">
					        <span aria-hidden="true">&laquo;</span>
					      </a>
					    </li>
				  	</c:if>
				    <c:forEach items="${pageInfo.navigatepageNums }" var="page_Num">
				    	<c:if test="${page_Num==pageInfo.pageNum }">
				    		 <li class="active"><a href="${APP_Path }/emps?pn=${page_Num }">${page_Num }</a></li>
				    	</c:if>
				    	<c:if test="${page_Num!=pageInfo.pageNum }">
				    		 <li><a href="${APP_Path }/emps?pn=${page_Num }">${page_Num }</a></li>
				    	</c:if>
				    </c:forEach>
				    <c:if test="${pageInfo.hasNextPage }">
					    <li>
					      <a href="${APP_Path }/emps?pn=${pageInfo.pageNum+1 }" aria-label="Next">
					        <span aria-hidden="true">&raquo;</span>
					      </a>
					    </li>
				    </c:if>
				    <c:if test="${!pageInfo.isLastPage }">
				    	<li><a href="${APP_Path }/emps?pn=${pageInfo.pages }">末页</a></li>
				    </c:if>
				     <c:if test="${pageInfo.isLastPage }">
				    	<li class="disabled"><a href="${APP_Path }/emps?pn=${pageInfo.pages }">末页</a></li>
				    </c:if>
				  </ul>
				</nav>
  			</div>
  		</div>
  	</div>
  
  </body>
</html>
